<template>
    <div class="search-box">
        <div class="flex">
            <div>
                <el-icon>
                    <Search />
                </el-icon><span>筛选搜索</span>
            </div>
            <div>
                <el-button @click="resetForm">重置</el-button>
                <el-button @click="submitFn" type="primary">查询搜索</el-button>
            </div>
        </div>
        <div style="padding-top: 20px">
          <ElConfigProvider :locale="zhCn">
            <el-form @submit.prevent="submitFn" ref="searchFormRef">
                <el-form-item label="输入搜索:" prop="keyword" label-width="120px">
                    <el-input placeholder="订单编号" style="width: 215px"></el-input>
                </el-form-item>
                <el-form-item label="收货人:" prop="keyword" label-width="120px">
                    <el-input placeholder="收货人姓名/手机号码" style="width: 215px"></el-input>
                </el-form-item>
                <el-form-item label="提交时间:" prop="keyword" label-width="120px">
                    <el-col :span="11">
                        <el-date-picker v-model="form.date1" type="date" placeholder="请选择时间" />
                    </el-col>
                </el-form-item>
                <el-form-item label="订单状态:" prop="keyword" label-width="120px">
                    <el-select v-model="form.region" placeholder="全部">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
                <el-form-item label="订单分类:" prop="keyword" label-width="120px">
                    <el-select v-model="form.region" placeholder="全部">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
                <el-form-item label="订单来源:" prop="keyword" label-width="120px">
                    <el-select v-model="form.region" placeholder="全部">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
            </el-form>
          </ElConfigProvider>
        </div>
    </div>
    <div class="list">
        <el-icon><Tickets /></el-icon>数据列表
    </div>
    
    <el-table
    border
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    >
        <el-table-column type="selection" width="55" />
        <el-table-column label="编号"></el-table-column>
        <el-table-column property="name" label="订单编号"/>
        <el-table-column property="name" label="提交时间"/>
        <el-table-column property="name" label="用户账号"/>
        <el-table-column property="name" label="订单金额"/>
        <el-table-column property="name" label="支付方式"/>
        <el-table-column property="name" label="订单来源"/>
        <el-table-column property="name" label="订单状态"/>
        <el-table-column property="name" label="操作" fixed="right" width="180"></el-table-column>
    </el-table>

    <div class="bottom">
        <div class="left">
            <el-form-item prop="keyword">
                <el-select v-model="form.region" placeholder="批量操作">
                    <el-option label="批量发货" value="shanghai" />
                    <el-option label="关闭订单" value="beijing" />
                    <el-option label="删除订单" value="beijing" />
                </el-select>
            </el-form-item>
            <el-button type="primary">确定</el-button>
        </div>
        <ElConfigProvider :locale="zhCn">
            <el-pagination
            v-model:currentPage="listParams.pageNum"
            v-model:page-size="listParams.pageSize"
            :page-sizes="[5,10,15]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="pageSizeChagne"
            @current-change="currentChange"
            />
    </ElConfigProvider>
    </div>
</template>

<script setup lang='ts'>
import { ElConfigProvider } from 'element-plus'
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { Search, Tickets } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import { user } from '@/api';

// 搜索的数据
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
// 表格的数据
const tableData = ref([])
// 分页器的数据
const listParams = reactive({
    createTime: '',
    orderSn: 0,
    orderType: 0,
    receiverKeyword: 0,
    sourceType: 0,
    status: 0,
    pageNum: 1,
    pageSize: 10,
})
const total = 10

interface User {
  date: string
  name: string
  address: string
}
const multipleSelection = ref<User[]>([])
//表选的选择按钮
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

user.orderListApi(listParams).then(res=>{
    console.log(1111);
})

// 重置按钮
const resetForm = () => {}
// 查询搜索
const submitFn = () => {}

// 分页器
const currentChange =()=>{}
const pageSizeChagne =()=>{}

</script>




<style lang="less" scoped>
.search-box {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;

    .flex {
        display: flex;
        justify-content: space-between;
    }
    form {
        display: flex;
        flex-wrap: wrap;
        .el-form-item {
            flex: 33%;
        }
    }
}
// 修改提交时间框的样式
.el-input__wrapper{
    width: 200px;
}
.list{
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
}

.bottom{
    display: flex;
    justify-content: space-between;
    .left{
        display: flex;
        margin-top: 20px;
        .el-button{
            margin-left: 10px;
        }
    }
}
</style>